<template>
  <div>
    <el-table :data="tableData" style="width: 100%" v-sticky-header ref="table">
      <el-table-column prop="date" label="日期" width="380"></el-table-column>
      <el-table-column prop="name" label="姓名" width="480"></el-table-column>
      <el-table-column prop="address" label="地址" width="580" />
      <el-table-column></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {},
    components: {},
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
        ],
      };
    },
    computed: {},
    watch: {},
    methods: {
      triggerContainerScroll() {
        // 获取表格的可滚动容器（根据你的实际页面结构调整）
        const container = this.findScrollContainer();
        if (container) {
          // 轻微滚动1像素然后立即滚回
          if (container.scrollTop > 0) {
            container.scrollTop += 1;
            setTimeout(() => {
              container.scrollTop -= 1;
            }, 50);
          } else {
            container.scrollTop = 1;
            setTimeout(() => {
              container.scrollTop = 0;
            }, 50);
          }
        }
      },

      findScrollContainer() {
        // 根据你的页面结构找到包含表格的可滚动容器
        // 这里是一个示例，你可能需要调整
        let el = this.$refs.table.$el;
        while (el && el !== document.body) {
          const overflowY = window.getComputedStyle(el).overflowY;
          if (overflowY === 'auto' || overflowY === 'scroll') {
            return el;
          }
          el = el.parentElement;
        }
        return window;
      },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    activated() {
      this.$nextTick(() => {
        // 方法1：轻微滚动容器触发指令的scrollHandler
        this.triggerContainerScroll();
      });
    },
    deactivated() {},
    beforeDestroy() {},
    destroyed() {},
  };
</script>

<style lang="scss" scoped></style>
